<template>
	<view class="page">
		<view class="pl30  bg-w box-shadow-bottom unio2o-nav-body">
			<scroll-view class="unio2o-nav" scroll-x="true">
				<view @click="scrollSelect" :data-index="0" :class="{'on':selectIndex == 0}" class="item">
					<view class="pt20">推荐</view>
					<view class="bg-main"></view>
				</view>
				<view v-for="(item,index) in cats" :key="index" :data-index="index+1" @click="scrollSelect"
					:class="{'on':selectIndex == index+1}" class="item">
					<view class="pt20">{{item.name}}</view>
					<view class="bg-main"></view>
				</view>
			</scroll-view>
		</view>

		<scroll-view class="unio2o-toutiao-scroll" scroll-y="true">
			<view class="bg-w plr30 unio2o-toutiao" v-for="(item,index) in newsList" :key="index">
				<unio2o-toutiao-item :content="item"></unio2o-toutiao-item>
				<view class="line"></view>
			</view>
		</scroll-view>

		<unio2o-toutiao-follow></unio2o-toutiao-follow>

		<unio2o-footer :selectIndex="2"></unio2o-footer>
	</view>
</template>

<script>
	import unio2oToutiaoItem from './components/item.vue';
	import unio2oToutiaoFollow from './components/follow.vue';
	// 导入API模块
import api from '@/api';
const { getList, getCategories } = api.toutiao;
	export default {
		components: {
			unio2oToutiaoItem,
			unio2oToutiaoFollow
		},
		data() {
			return {
				selectIndex: 0,
				cats: [],
				newsList: []
			};
		},
		onLoad() {
			this.getCategories();
			this.getList();
		},
		methods: {
			// 获取分类列表
			async getCategories() {
				try {
					const res = await getToutiaoCategories();
					this.cats = res.data || [
						{
							name: '美食',
							id: 1
						},
						{
							name: '酒店',
							id: 2
						},
						{
							name: '休闲娱乐',
							id: 3
						},
						{
							name: '周边游',
							id: 4
						},
						{
							name: '亲子乐园',
							id: 5
						},
						{
							name: '丽人美发',
							id: 6
						},
						{
							name: '健身游泳',
							id: 7
						},
						{
							name: '结婚摄影',
							id: 8
						}
					];
				} catch (error) {
					console.error('获取分类列表失败:', error);
					// 使用默认分类数据
					this.cats = [
						{
							name: '美食',
							id: 1
						},
						{
							name: '酒店',
							id: 2
						},
						{
							name: '休闲娱乐',
							id: 3
						},
						{
							name: '周边游',
							id: 4
						},
						{
							name: '亲子乐园',
							id: 5
						},
						{
							name: '丽人美发',
							id: 6
						},
						{
							name: '健身游泳',
							id: 7
						},
						{
							name: '结婚摄影',
							id: 8
						}
					];
				}
			},
			// 获取头条列表
			async getList() {
				try {
					const categoryId = this.selectIndex === 0 ? '' : this.cats[this.selectIndex - 1]?.id || '';
					const res = await getToutiaoList({
						categoryId,
						page: 1,
						pageSize: 10
					});
					this.newsList = res.data || [];
				} catch (error) {
					console.error('获取头条列表失败:', error);
					// 使用模拟数据作为降级方案
					this.newsList = [
						// 1. 活动促销类
						{
							id: 1001,
							title: "暑期大促！国内热门旅游线路低至5折起",
							cover: "https://picsum.photos/600/300?travel=13",
							type: "促销活动",
							date: "2025-06-01",
							author: "市场部",
							content: `<p>暑期来临，CNT旅行社特别推出国内热门旅游线路限时优惠活动！</p><p><strong>活动内容：</strong></p><ul><li>黄山三日游：原价1299元，活动价899元（5折起）</li><li>张家界四日游：原价1599元，活动价1099元</li><li>成都美食之旅：原价999元，活动价699元</li><li>丽江大理双飞六日游：原价2999元，活动价1999元</li></ul><p><strong>活动时间：</strong>2025年6月1日至2025年8月31日</p><p><strong>预订方式：</strong>拨打客服热线400-888-8888或通过APP在线预订</p><p>名额有限，先到先得！快来开启您的暑期精彩旅程！</p>`,
							tags: ["暑期促销", "国内游", "优惠活动"],
							views: 1254,
							likes: 86,
							shares: 42,
							comments: 0,
							store: {
								id: 1,
								logo: 'https://picsum.photos/100/100?random=1',
								name: '卡夫卡少儿艺术培训中心',
								distance: '1.2km',
								isCollected: false
							}
						},
						// 2. 新店开业类
						{
							id: 1002,
							title: "CNT旅行社政务区分店盛大开业，诚邀您的光临！",
							cover: "https://picsum.photos/600/300?travel=14",
							type: "新店开业",
							date: "2025-05-15",
							author: "运营部",
							content: `<p>经过精心筹备，CNT旅行社政务区分店于2025年5月15日正式开业！</p><p><strong>分店地址：</strong>合肥市政务区天鹅湖路88号蔚蓝商务中心A座1001室</p><p><strong>开业活动：</strong></p><ul><li>开业期间（5月15日-5月31日），到店咨询即送精美旅行纪念品</li><li>现场签约任意旅游线路，立减200元</li><li>新客户注册会员，赠送价值300元旅游优惠券包</li></ul><p>政务区分店配备专业旅游顾问团队，为您提供一对一的个性化旅游规划服务。我们将以更贴心的服务、更优惠的价格，期待为您的旅行保驾护航！</p>`,
							tags: ["新店开业", "政务区", "开业活动"],
							views: 987,
							likes: 75,
							shares: 38,
							comments: 0,
							store: {
								id: 1,
								logo: 'https://picsum.photos/100/100?random=1',
								name: '卡夫卡少儿艺术培训中心',
								distance: '1.2km',
								isCollected: false
							}
						},
						// 3. 服务升级类
						{
							id: 1003,
							title: "CNT旅行社全新推出「私人定制旅行」服务",
							cover: "https://picsum.photos/600/300?travel=15",
							type: "服务升级",
							date: "2025-05-01",
							author: "产品部",
							content: `<p>为满足客户日益多样化的旅行需求，CNT旅行社即日起推出「私人定制旅行」服务！</p><p><strong>服务特色：</strong></p><ul><li><strong>个性化行程设计</strong>：根据您的兴趣、时间和预算，量身定制专属旅行方案</li><li><strong>高品质住宿体验</strong>：精选当地特色酒店、民宿，满足不同需求</li><li><strong>专属用车服务</strong>：全程专车接送，自由掌控行程节奏</li><li><strong>专业导游陪同</strong>：当地资深导游，提供深度文化讲解</li></ul><p><strong>定制流程：</strong></p><ol><li>在线提交需求或致电客服，说明您的旅行期望</li><li>专业顾问1对1沟通，制定初步方案</li><li>多次修改优化，直至方案完全符合您的需求</li><li>确认方案并签约，开启专属旅行</li></ol><p>无论是家庭出游、情侣度假还是商务考察，我们都能为您打造独一无二的旅行体验。立即联系我们，开启您的定制旅行之旅！</p>`,
							tags: ["服务升级", "私人定制", "高端旅行"],
							views: 1123,
							likes: 92,
							shares: 45,
							comments: 0,
							store: {
								id: 1,
								logo: 'https://picsum.photos/100/100?random=1',
								name: '卡夫卡少儿艺术培训中心',
								distance: '1.2km',
								isCollected: false
							}
						}
					];
				}
			},
			scrollSelect(e) {
				this.selectIndex = e.currentTarget.dataset.index;
				// 切换分类时重新获取数据
				this.getList();
			}
		}
	}
</script>

<style>
	.unio2o-toutiao-scroll {
		height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
	}
</style>